<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Lucky-Wheel</title>
    <meta name="description" content="欢迎参与我们的免费幸运大转盘抽奖活动！">
    <meta name="image" content="https://typecho.scoremaster.top/wheel.png">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="https://stc-developers.zdn.vn/static/v3/images/favicon.ico">
    <script src="plugins/vue/dist/vue.min.js"></script>
    <!--导入vue和axios-->
    <script src="plugins/axios/dist/axios.js"></script>
    <script src="js/common.js"></script>
    <script src="js/element/element.js"></script>
    <script src="js/vue-composition-api.prod.js"></script>
    <script src="js/vue-demi@0.11.4.js"></script>
    <script src="js/vue@0.1.11.js"></script>
    <script src="js/jsencrypt.js"></script>
    <script src="js/jquery.js" charset="UTF-8"></script>
    <link rel="stylesheet" href="js/element/element.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="app" class="container" v-cloak>
    <h1>免费抽大奖</h1>
    <div class="rules" style="height: auto;width: auto;margin-bottom: 50px">
        <button class="rules-button" @click="toggleRulesPopup">活动规则</button>
    </div>
    <img src="https://typecho.scoremaster.top/wheel.png"
         alt="iphone-15" class="iphone15" v-show="false">
    <lucky-wheel ref="myLucky" width="300px" height="300px" :prizes="prizes" :blocks="blocks" :buttons="buttons"
                 @start="startCallback" @end="endCallback" id="my-lucky" v-show="wheelFlag">
    </lucky-wheel>
    <div class="countPrize" v-show="wheelFlag">恭喜您获得{{numPrizes}}次免费抽奖机会</div>
    <div class="prizeWinList">
        <div class="prizeWinListContainer">
            <h2><span>中奖名单</span></h2>
            <div id="detetion-box2">
                <ul id="detetion-con1">
                    <li v-for="(item, index) in prizeWinList" :key="index">
                        <div><img :src="item.src" alt=""><em>{{item.uname}}</em></div>
                        <span>{{item.prize}}</span></li>
                </ul>
                <ul id="detetion-con2"></ul>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    new Vue({
        el: "#app",
        data: {
            numPrizes: 3,
            speed: 50,
            wheelFlag: true,
            prizes: [
                {background: '#faa300', fonts: [{id: 0, text: '谢谢惠顾', fontSize: 14, top: 10}]},
                {background: '#fecaa3', fonts: [{id: 1, text: 'iPhone 15', fontSize: 14, top: 10}]},
                {background: '#faa300', fonts: [{id: 2, text: '谢谢惠顾', fontSize: 14, top: 10}]},
                {background: '#fecaa3', fonts: [{id: 3, text: '谢谢惠顾', fontSize: 14, top: 10}]},
                {background: '#faa300', fonts: [{id: 4, text: 'iPhone 15 pro', fontSize: 14, top: 10}]},
                {background: '#fecaa3', fonts: [{id: 5, text: '谢谢惠顾', fontSize: 14, top: 10}]},
            ],
            blocks: [
                {padding: '10px', background: '#9e3a05'}
            ],
            buttons: [
                {radius: '40%', background: '#faa300'},
                {radius: '35%', background: '#fecaa3'},
                {
                    radius: '30%', background: '#9e3a05',
                    pointer: true,
                    fonts: [{text: '开始', top: '-10px'}]
                }
            ],
            prizeWinList: [
                {
                    src: 'https://wxapp.tc.qq.com/275/20304/stodownload?m=cd1320414cbe406fdc181a4a87bac44b&filekey=30350201010421301f02020113040253480410cd1320414cbe406fdc181a4a87bac44b020300be7a040d00000004627466730000000132&hy=SH&storeid=264787b54000be6e6000000000000011300004f5053481a3e1b01e6561004e&bizid=1023',
                    uname: '1***0',
                    prize: 'iPhone 15'
                },
                {
                    src: 'https://wxapp.tc.qq.com/275/20304/stodownload?m=f232c65bedac7f9d78c95cdb7d6a5a5c&filekey=30350201010421301f02020113040253480410f232c65bedac7f9d78c95cdb7d6a5a5c020300b867040d00000004627466730000000132&hy=SH&storeid=264784f39000465a4000000000000011300004f50534828d148e0b6500fd9a&bizid=1023',
                    uname: '1***0',
                    prize: '谢谢惠顾'
                },
                {
                    src: 'https://wxapp.tc.qq.com/275/20304/stodownload?m=cd1320414cbe406fdc181a4a87bac44b&filekey=30350201010421301f02020113040253480410cd1320414cbe406fdc181a4a87bac44b020300be7a040d00000004627466730000000132&hy=SH&storeid=264787b54000be6e6000000000000011300004f5053481a3e1b01e6561004e&bizid=1023',
                    uname: '1***0',
                    prize: 'iPhone 15 pro'
                },
                {
                    src: 'https://wxapp.tc.qq.com/275/20304/stodownload?m=f232c65bedac7f9d78c95cdb7d6a5a5c&filekey=30350201010421301f02020113040253480410f232c65bedac7f9d78c95cdb7d6a5a5c020300b867040d00000004627466730000000132&hy=SH&storeid=264784f39000465a4000000000000011300004f50534828d148e0b6500fd9a&bizid=1023',
                    uname: '1***0',
                    prize: '谢谢惠顾'
                },
                {
                    src: 'https://wxapp.tc.qq.com/275/20304/stodownload?m=f232c65bedac7f9d78c95cdb7d6a5a5c&filekey=30350201010421301f02020113040253480410f232c65bedac7f9d78c95cdb7d6a5a5c020300b867040d00000004627466730000000132&hy=SH&storeid=264784f39000465a4000000000000011300004f50534828d148e0b6500fd9a&bizid=1023',
                    uname: '1***0',
                    prize: 'iPhone 15'
                },
                {
                    src: 'https://wxapp.tc.qq.com/275/20304/stodownload?m=f232c65bedac7f9d78c95cdb7d6a5a5c&filekey=30350201010421301f02020113040253480410f232c65bedac7f9d78c95cdb7d6a5a5c020300b867040d00000004627466730000000132&hy=SH&storeid=264784f39000465a4000000000000011300004f50534828d148e0b6500fd9a&bizid=1023',
                    uname: '1***0',
                    prize: '谢谢惠顾'
                },
                {
                    src: 'https://wxapp.tc.qq.com/275/20304/stodownload?m=f232c65bedac7f9d78c95cdb7d6a5a5c&filekey=30350201010421301f02020113040253480410f232c65bedac7f9d78c95cdb7d6a5a5c020300b867040d00000004627466730000000132&hy=SH&storeid=264784f39000465a4000000000000011300004f50534828d148e0b6500fd9a&bizid=1023',
                    uname: '1***0',
                    prize: '谢谢惠顾'
                },
                {
                    src: 'https://wxapp.tc.qq.com/275/20304/stodownload?m=cd1320414cbe406fdc181a4a87bac44b&filekey=30350201010421301f02020113040253480410cd1320414cbe406fdc181a4a87bac44b020300be7a040d00000004627466730000000132&hy=SH&storeid=264787b54000be6e6000000000000011300004f5053481a3e1b01e6561004e&bizid=1023',
                    uname: '1***0',
                    prize: 'iPhone 15 pro'
                },
            ],
            LuckyShare: {
                inviteCode: null,
                verifyCount: null,
                expire: false,
                mi: null,
                submitParam: false,
                inviteParam:{
                    id:null,
                    count2:null,
                    effectiveCount:null,
                    invitedCode:null,
                    parentId:null,
                },
                secondStage:null,
                firstStage:null,
                url:null,
            },
        },
        methods: {
            toggleRulesPopup() {
                this.showRules = !this.showRules;
            },
            startCallback() {
                if (this.numPrizes > 0) {
                    // 调用抽奖组件的play方法开始游戏
                    this.$refs.myLucky.play()
                    // 模拟调用接口异步抽奖
                    if (this.numPrizes > 1) {
                        this.numPrizes--
                        setTimeout(() => {
                            // 假设后端返回的中奖索引是0
                            const index = 0
                            // 调用stop停止旋转并传递中奖索引
                            this.$refs.myLucky.stop(index)
                        }, 3000)
                    } else if (this.numPrizes === 1) {
                        this.numPrizes--
                        setTimeout(() => {
                            const index = 1
                            this.$refs.myLucky.stop(index)
                        }, 3000)
                    }
                }
            },
            // 抽奖结束会触发end回调
            endCallback(prize) {
                if (prize.fonts[0].id === 1) {
                    this.maskFlag = true
                }
            },
            scrollUp() {
                var box = document.getElementById("detetion-box2");
                var con1 = document.getElementById("detetion-con1");
                var con2 = document.getElementById("detetion-con2");
                if (con1.offsetHeight >= box.offsetHeight) {
                    con2.innerHTML = con1.innerHTML;
                    var timer1 = setInterval(scrol, this.speed);

                    function scrol() {
                        if (box.scrollTop >= con1.scrollHeight) {
                            box.scrollTop = 0;
                        } else {
                            box.scrollTop++;
                        }
                        if (box.scrollTop % 25 === 0) {
                            clearInterval(timer1);
                            setTimeout(() => {
                                timer1 = setInterval(scrol, 30);
                            }, 1000);
                        }
                    }
                }
            },
            getWithExpiry(key) {
                const itemStr = localStorage.getItem(key);

                if (!itemStr) {
                    return null;
                }

                try {
                    const item = JSON.parse(itemStr);
                    const now = new Date();

                    if (now.getTime() > item.expiry) {0
                        localStorage.removeItem(key);
                        return null;
                    }

                    return item.value;
                } catch (e) {
                    console.error("Error parsing JSON from localStorage:", e);
                    // localStorage.removeItem(key);
                    return null;
                }
            },
            getInviteCode(){
                const loading = this.$loading({
                    lock: true,
                    text: 'Loading',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)',
                    customClass: 'loading-class'
                });

                this.url = window.location.href;
                let parseParamObj1 = parseParamObj(this.url);
                //发送请求给后端，验证链接是否有效，无效404，有效正常跳转。
                let s = RsA_encryption(parseParamObj1)
                this.$http.post("/redirect/redirectByCode2", parseParamObj1).then(res => {
                    let {data, success, msg,code} = res.data;
                    console.log(res.data)
                    this.LuckyShare = data
                    if (success && data != null){
                        if (this.LuckyShare.verifyCount >= 3 && this.LuckyShare.secondStage && this.LuckyShare.submitParam){
                            //二阶段的助力
                            setTimeout(() => {
                                loading.close();
                                window.location.href = data.url + "?ref=" + this.LuckyShare.inviteCode + "&progress=true";
                            }, 2000);
                        }else {
                            //一阶段的助力
                            setTimeout(() => {
                                loading.close();
                                window.location.href = data.url + "?ref=" + this.LuckyShare.inviteCode
                            }, 2000);
                        }
                    }else {
                        setTimeout(() => {
                            loading.close();
                            // 这里可以添加跳转逻辑或其他逻辑
                            window.location.href = '404.html';
                        }, 2000);
                    }
                }).catch(res => {
                    setTimeout(() => {
                        loading.close();
                        // 这里可以添加跳转逻辑或其他逻辑
                        window.location.href = '404.html';
                    }, 2000);
                    console.log('Error verifying referral:', res);
                });
            },
        },
        mounted(){
            this.getInviteCode();
            this.scrollUp();
        },
    })
</script>
</body>
</html>
